<template>
  <div class="joe_main">
    <section class="joe_aside__item author" style="width: 100%;padding: 0;">
      <!--      <img width="100%" height="120" class="image ls-is-cached lazyloaded"-->
      <!--           src="@/assets/images/user-background-img.jpg"-->
      <!--           alt="博主栏壁纸">-->
      <!--      <div class="user">-->
      <!--        <img width="75" height="75" class="avatar ls-is-cached lazyloaded"-->
      <!--             :src="getImgView(userInfo.avatar)"-->
      <!--             alt="博主头像">-->
      <!--        <router-link class="link" to="/personalHome/chenshuang" target="_self" rel="noopener noreferrer nofollow">-->
      <!--          {{ userInfo.realname }}-->
      <!--        </router-link>-->

      <!--      </div>-->
      <!--      <div class="count" style="  padding: 0;">-->
      <!--        <div class="item" title="码龄" style="border: none">-->
      <!--          <span style=" font-weight: 500;font-size: 22px;color: var(&#45;&#45;main);">-->
      <!--            码龄 {{ yardAge }}-->
      <!--          </span>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="count" style="border: none;padding: 0;margin-top: 10px">-->
      <!--        <div class="item" title="码龄" style="border: none;font-size: 13px">-->
      <!--          {{ userInfo.personDescribe ? userInfo.personDescribe : '暂无描述' }}-->
      <!--        </div>-->
      <!--      </div>-->
      <a-card hoverable :bordered="false">
        <a-card-meta :title="userInfo.realname"
                     :description="userInfo.personDescribe ? userInfo.personDescribe : '暂无描述'"
        >
          <template #avatar>
            <div class="user" style="padding: 0">
              <router-link class="link" :to="'/personalHome/'+userInfo.username" target="_self" rel="noopener noreferrer nofollow">
                <img width="75" height="75" class="avatar ls-is-cached lazyloaded"
                     :src="getImgView(userInfo.avatar)"
                     alt="博主头像"
                >
              </router-link>

            </div>
          </template>
        </a-card-meta>
      </a-card>
    </section>
    <div class="joe_index">
      <div class="joe_index__title">
        <ul class="joe_index__title-title" style="margin-bottom: 0">
          <li class="item" data-type="created">基本信息</li>
        </ul>
      </div>
      <div class="joe_index__list" data-wow="fadeIn">
        <personal-data-base-list
          ref="personalDataBaseList"
          v-if="isBaseFlag"
          @showFlag="showBaseFlag"
          @initUserInfo="initUserInfo"
        />
        <personal-data-base-edit ref="personalDataBaseEdit" v-else @cancel="cancelBaseEdit"/>
      </div>
    </div>
    <div class="joe_index" style="margin-top: 15px">
      <div class="joe_index__title">
        <ul class="joe_index__title-title" style="margin-bottom: 0">
          <li class="item" data-type="created">教育信息</li>
        </ul>
      </div>
      <div class="joe_index__list" data-wow="fadeIn">
        <personal-data-education-list ref="personalDataEducationList" v-if="isEducationFlag"
                                      @showFlag="showEducationFlag"
                                      @initUserInfo="initUserInfo"
        />
        <personal-data-education-edit ref="personalDataEducationEdit" v-else @cancel="cancelEducationEdit"/>
      </div>
    </div>
  </div>
</template>

<script>

import PersonalDataBaseList from './subTables/PersonalDataBaseList'
import PersonalDataBaseEdit from './subTables/PersonalDataBaseEdit'
import PersonalDataEducationList from './subTables/PersonalDataEducationList'
import PersonalDataEducationEdit from './subTables/PersonalDataEducationEdit'
import { getAction, getFileAccessHttpUrl } from '@/api/manage'
import { differenceDate } from '@/utils/util'

export default {
  components: {
    PersonalDataBaseList,
    PersonalDataBaseEdit,
    PersonalDataEducationList,
    PersonalDataEducationEdit
  },
  name: 'PersonalData',
  data() {
    return {
      isBaseFlag: true,
      isEducationFlag: true,
      userInfo: {},
      yardAge: ''
    }
  },
  mounted() {
    this.differenceDate()
  },
  methods: {
    initUserInfo(userInfo) {
      this.userInfo = userInfo
    },
    showBaseFlag(flag, userInfo) {
      this.isBaseFlag = flag
      this.$nextTick(() => {
        this.$refs.personalDataBaseEdit.edit(userInfo)
      })
    },
    showEducationFlag(flag, userInfo) {
      this.isEducationFlag = flag
      this.$nextTick(() => {
        this.$refs.personalDataEducationEdit.edit(userInfo)
      })
    },
    cancelBaseEdit() {
      this.isBaseFlag = true
    },
    cancelEducationEdit() {
      this.isEducationFlag = true
    },
    /* 图片预览 */
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },
    differenceDate() {
      getAction('/sys/user/yardAge', {}).then(res => {
        if (res.success) {
          this.yardAge = res.message
        }
      })
    }
  }
}
</script>

<style>
.ant-card-body {
  padding: 24px 24px 0 24px;
}
</style>
